/*
 general.css 1.5.1
 This file is part of OpenAero.

  OpenAero was originally designed by Ringo Massa and built upon ideas
  of Jose Luis Aresti, Michael Golan, Alan Cassidy and many others. 

  OpenAero is free software: you can redistribute it and/or modify
  it under the terms of the GNU General Public License as published by
  the Free Software Foundation, either version 3 of the License, or
  (at your option) any later version.

  OpenAero is distributed in the hope that it will be useful,
  but WITHOUT ANY WARRANTY; without even the implied warranty of
  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
  GNU General Public License for more details.

  You should have received a copy of the GNU General Public License
  along with OpenAero.  If not, see <http://www.gnu.org/licenses/>.
*/

/* This file defines the common css styles for the desktop and
   mobile versions */

/* General styling */
body {
  margin: 0;
  padding: 0;
  font-family: Helvetica, Verdana, sans-serif;
}
span {
  margin: 0;
  padding: 0;
}
img {
  margin: 0;
}
a {
  color: blue;
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}
/* Remove Firefox dotted outline */ 
a:focus { 
  outline: none; 
}
hr {
  margin: 1px;
  padding: 0px;
}
img, svg, li {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
}
input {
  border-left: 1px solid #222;
  border-top: 1px solid #222;
  border-right: 1px solid #aaa;
  border-bottom: 1px solid #aaa;
  border-radius: 3px;
  margin-bottom: 1px;
  padding: 2px;
  -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	-moz-box-sizing: border-box;    /* Firefox, other Gecko */
	box-sizing: border-box;
}
select {
  border-left: 1px solid #222;
  border-top: 1px solid #222;
  border-right: 1px solid #aaa;
  border-bottom: 1px solid #aaa;
  border-radius: 3px;
  margin-bottom: 1px;
  background: #ffffff;
  -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	-moz-box-sizing: border-box;    /* Firefox, other Gecko */
	box-sizing: border-box;
}
textarea {
  border-left: 1px solid #222;
  border-top: 1px solid #222;
  border-right: 1px solid #aaa;
  border-bottom: 1px solid #aaa;
  border-radius: 3px;
  -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	-moz-box-sizing: border-box;    /* Firefox, other Gecko */
	box-sizing: border-box;
}

/* generic classes */

.clearBoth {
  clear: both;
}
.clearSpace {
  clear: both;
  height: 2px;
}
.clearLeft {
  clear: left;
}
.clearNone {
  clear: none;
}
.noDisplay {
  display: none !important;
}
.hidden {
  height: 0 !important;
  margin: 0 !important;
  visibility: hidden;
}
.displayMenu {
  display: block;
}
.blur {
  -moz-filter: blur (20px);
  -webkit-filter: blur (20px);
  -o-filter: blur(20px);
  filter: blur (20px);
}
.noWrap {
  white-space : nowrap;
}
.chromeHint {
  color: #404040;
  font-size: 0.9em;
}

/* specific styling */

/* virtual keyboard */
#virtualKeyboard {
  position: absolute;
  font-size: 24px;
  text-shadow:-1px -1px white, 1px 1px #ccc;
  z-index: 5;
}
#virtualKeyboard td {
  border-left: 1px solid #fff;
  border-top: 1px solid #fff;
  border-right: 1px solid #bbb;
  border-bottom: 1px solid #888;
  border-radius: 4px;
  width: 32px;
  height: 32px;
  text-align: center;
  background-color: #f4f4f4;
  opacity: 0.9;
}
#virtualKeyboard td.clicked {
  border-left: 1px solid #bbb;
  border-top: 1px solid #888;
  border-right: 1px solid #fff;
  border-bottom: 1px solid #fff;
  background-color: #ddd;
}

#figureSvgContainer {
  position: absolute;
  left:-500px;
  width:0;
  height:0;
  opacity:0;
}
#figureChooserSvg {
  position: absolute;
  left:-500px;
  width:0;
  height:0;
  opacity:0;
}
#openAeroLogo {
  float:left;
  color: white;
  font-weight: bold;
  font-size: 14px;
  border-right: 1px solid #888;
  border-bottom: 1px solid #888;
  border-radius: 3px;
  background: #ff6030;
  padding: 3px;
  margin-right: 3px;
}
#mainMenu {
  width: 100%;
  height: 25px;
  font-size: 14px;
}

/* sections and documentation */
.section, .section2cols, .section3cols, .docs table tr {
  position: relative;
  float: left;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  border-top: 2px solid #fff;
  border-left: 2px solid #fff;
  border-bottom: 1px solid #aaa;
  border-right: 1px solid #aaa;
  border-radius: 5px;
  margin: 10px 1px 1px 1px;
  background: #f4f4f4;
}
.docs table.regularTable tr {
	border: 0;
  margin: 2px;
  background: transparent;
  float: none;
  box-sizing: content-box;
  -moz-box-sizing: content-box;
}
.docs table.regularTable td {
  padding: 0;
  padding-right: 1em;
}
.section3cols {
  width: 31%;
}
.section2cols {
  width: 48%;
}
.section, .docs table tr {
  width: 99%;
}
.docs table tr td {
  padding: 1em;
}
.docs table table tr {
  border: 0;
  background: transparent;
}
.documentation {
  width: auto;
  margin: 1em;
  padding: 2em;
  background: #f8f8f8;
  background: -webkit-linear-gradient(top, #ffffff, #f4f4f4);
  background: linear-gradient(top, #ffffff, #f4f4f4);
  -moz-box-shadow: 5px 5px 8px rgba(0, 0, 0, 0.3);
  -webkit-box-shadow: 5px 5px 8px rgba(0, 0, 0, 0.3);
  box-shadow: 5px 5px 8px rgba(0, 0, 0, 0.3);
}
.docs {
  background: #f8f8f8;
  background: -webkit-linear-gradient(315deg, #ffe090, #fff);
  background: linear-gradient(315deg, #ffe090, #fff);
}
.docs table {
  margin: 1em;
}
.docs img {
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.closeDocs {
  position: fixed;
  z-index: 999;
  top: 1em;
  right: 1em;
  width: 3em;
  height: 3em;
  background: url('../buttons/close.png');
  background-size: 3em 3em;
  background-repeat: no-repeat;
}

#sequenceInfo {
  font-size: 12px;
}
#figureInfo {
  font-size: 12px;
}
#alerts {
  font-size: 12px;
  color: #d22;
  background: #fff;
  clear: both;
}
#alerts span {
  display: inline-block;
  padding-left: 1.5em;
  text-indent: -1.5em;
}
.sectionLabel {
  float: left;
  font-size: 14px;
  color: #006;
  margin: -10px 0 -6px 10px;
  border-top: 2px solid #fff;
  background: #f4f4f4;
  border-radius: 10px;
  padding-left: 3px;
  padding-right: 3px;
}
#alerts .sectionLabel {
  background: #fff;
}
.sectionLabelClose {
  clear: both;
  margin-bottom: -8px;
}
.info {
  margin: 2px;
  float: right;
}
.item {
  clear: both;
  margin: 2px;
}
.label {
  font-size: 0.9em;
  float: left;
}
#sequenceInfo input {
  float: right;
  width: 170px;
  height: 1.5em;
  font-size: 12px;
}
#sequenceInfo select {
  float: right;
  width: 170px;
  height: 1.6em;
  font-size: 12px;
}
option.used {
  color: red;
}
#notes {
  width: 98%;
  font-size: 12px;
}
#fileName {
  float: left !important;
  width: 98% !important;
}
#activeLogo, #t_referenceSequence {
  margin-top: 2px;
  margin-bottom: 2px;
  float: right;
}
#sequenceInfo file {
  float: right;
  width: 120px;
  font-size: 12px;
  border: 1px solid black;
}
#design {
  padding-top:10px;
  text-align:center;
  text-shadow:1px 1px white;
  color:rgba(0,0,0,0.3);
}
#mainMenu ul {
  float: left;
}
.openFile {
  position: relative;
}
#mainMenu input {
  position: absolute;
  left: 0px;
  top: 0px;
  font-size: 14px;
  width: 100%;
  opacity: 0;
  cursor: pointer;
}
#sequenceTextContainer {
  position: relative;
  margin-right: 12px;
  left: 22px;
  font-family: monospace;
  font-size: 16px;
  padding: 2px;
}
#sequenceTextClone {
  color: transparent;
  top: 0px;
  left: 2px;
  font-family: monospace;
  font-size: 16px;
  width: 98%;
  min-height: 16px;
}
#chooseLogo div {
  display: inline-block;
}
#chooseLogo svg {
  margin: 10px 10px 0 0;
}
#zoom {
  float: left;
  margin: 2px;
}
#zoom, #zoomMenu span, #zoomMenu a {
  float: left;
}

/* boxes and dialogs */
.boxbg {
  background: rgba(0,0,0,0.5);
  background: -webkit-linear-gradient(315deg, rgba(0,0,0,0.4), rgba(0,0,0,0.7));
  background: linear-gradient(315deg, rgba(0,0,0,0.4), rgba(0,0,0,0.7));
  background-repeat: no-repeat;
  background-position: center; 
  overflow: auto;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index:998;
}
.box {
  overflow: auto;
  margin: 5px;
  padding: 2px;
  position: absolute;
  z-index: 999;
  top: 10%;
  left: 10%;
  width: 80%;
  background: #f4f4f4;
  border: 1px solid white;
  border-radius: 5px;
  -moz-box-shadow: 5px 5px 8px rgba(0, 0, 0, 0.5);
  -webkit-box-shadow: 5px 5px 8px rgba(0, 0, 0, 0.5);
  box-shadow: 5px 5px 8px rgba(0, 0, 0, 0.5);
}
.box div {
  overflow: auto;
  margin: 5px;
  padding: 2px;
}
.box div div {
  overflow: visible;
  margin-left: 0;
  margin-right: 0;
}
.textButton {
  display: inline-block;
  background: #55b;
  background: -webkit-linear-gradient(top, #66d 0%,#55b 100%); /* Chrome10+,Safari5.1+ */
  background: linear-gradient(to bottom, #66d 0%,#55b 100%); /* W3C */
  color: white;
  font-weight: bold;
  border: 2px solid #bcf;
  border-radius: 5px;
  padding: 2px;
  margin: 0.5em 0 0.5em 0.5em;
  text-decoration: none;
  cursor: pointer;
}
.textButton a {
  color: white;
  text-decoration: none;
}
.textButton:hover {
  background: #77d;
  text-decoration: none;
}
.textButton:active {
  color: #ddd;
  background: #55b;
  background: -webkit-linear-gradient(top, #66d 0%,#55b 100%); /* Chrome10+,Safari5.1+ */
  background: linear-gradient(to bottom, #66d 0%,#55b 100%); /* W3C */
  border-top: 2px solid #89c;
  border-right: 2px solid #def;
  border-bottom: 2px solid #def;
  border-left: 2px solid #89c;
}

#fileExt {
  font-size: 1.2em;
  font-weight: bold;
}

/* iOS save dialog */
.iOSsaveIcon {
  display: inline-block;
	width: 1em;
	height: 1.2em;
	background-image:url();
	margin-top: -0.1em;
  background-repeat: no-repeat;
	background-size: auto 100%;
}

/* openSequenceLink dialog */
#openSequenceLinkUrl {
	width: 99%;
  height: 10em;
}

/* print dialog */
#formRL {
float: left;
  white-space: nowrap;
}
.twoLine {
  float: right;
  transform : scale(1.5,3) translate(0,3px);
  -webkit-transform:scale(1.5,3) translate(0,3px); /* Safari and Chrome */
  -moz-transform:scale(1.5,3) translate(0,3px); /* Firefox */
  -ms-transform:scale(1.5,3) translate(0,3px); /* IE 9+ */
  -o-transform:scale(1.5,3) translate(0,3px); /* Opera */
  color: #555;
}
#t_newReplacementsABC {
  float: right;
  font-size: 0.9em;
  color: #222;
  width: 60%;
  padding-top: 0.5em;
}
#pilotCardX, #pilotCardY {
  width: 4em;
}
#pilotCardPercentValue {
  width: 3em;
}
.folded div {
  margin: 0;
  height: 0;
  opacity: 0;
  border: 0;
  -webkit-transition: height 0.2s, opacity 0.2s;
  -moz-transition: height 0.2s, opacity 0.2s;
  -o-transition: height 0.2s, opacity 0.2s;
  transition: height 0.2s, opacity 0.2s;
}
#pilotCardSpacer {
  float: left;
  width: 0.8em;
}
#printFormGrid {
  z-index: 100;
}
.pilotCardLayout {
  float: left;
  width: 70px;
  height: 98px;
  overflow-y: hidden;
  border-top: 2px solid #ddd;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  border-left: 2px solid #ddd;
  border-radius: 5px;
	background-color: transparent;
	background-repeat: no-repeat;
	background-position: 5px 5px;
  -webkit-transition: height 0.2s, opacity 0.2s;
  -moz-transition: height 0.2s, opacity 0.2s;
  -o-transition: height 0.2s, opacity 0.2s;
  transition: height 0.2s, opacity 0.2s;
}
.pilotCardLayout.active {
  border: 2px solid magenta;
  background-color: #fff0f8;
}
#pilotCardXY {
  background-image: url('../images/PilotCardXY.png');
  text-align: right;
  width: 140px;
  color: #00c;
  font-weight: bold;
}
#pilotCardXY div {
  display: block;
  height: 28px;
  margin: 0px;
  overflow: hidden;
}
#pilotCardPercent {
  position: relative;
  background-image: url('../images/PilotCardPercent.png');
}
#pilotCardPercent span {
  position: absolute;
  left: 10px;
  bottom: 9px;
}
#pilotCard2 {
  background-image: url('../images/PilotCard2.png');
}
#pilotCard4 {
  background-image: url('../images/PilotCard4.png');
}
#imageWidth, #imageHeight, #pageSpacing {
  width: 4em;
}
#printDialog .main {
  clear: none;
  float: left;
}
#printDialog .sub {
  clear: none;
  float: left;
  border-left: 1px solid #ccc;
}
#maxScaling {
  width: 4em;
}
.fileDrop {
  overflow: auto !important;
  position: relative;
  left: 0px;
  right: 0px;
  height: 6em;
  border: 5px dashed #aaa;
  border-radius: 20px;
  background-color: #fff;
  color: #aaa;
  font-size: 2em;
  text-align: center;
  padding: 2em;
}
#printMultiFiles {
  width: 15em;
}
#fileDropFiles, #fileDropPrintFiles {
  margin-left: 0.5em;
  color: #000;
  font-size: 16px;
  text-align: left;
}
#fileDropFiles div, #fileDropPrintFiles div {
  margin: 0;
}
.fileListFileRemove {
  display: inline-block;
  width: 16px;
  height: 16px;
  background-image: url('../buttons/close.png');
  background-repeat: no-repeat;
  background-size: 16px;
  margin: 0 5px 0 0;
}
/* end print dialog */

/* reference sequence */
#referenceSequenceAlerts {
  color: #f00;
}
#referenceSequenceSvgContainer {
  width: 99%;
  overflow-x: auto;
}
/* end reference sequence */

.close {
  float: right;
  margin: 0.5em;
}
#alertBoxOverlay {
/* set font for noscript warning */
  font-size: 2em;
  color: white;
  padding: 2em;
  background: rgba(0,0,0,0.5);
  background: -webkit-linear-gradient(315deg, rgba(0,0,0,0.4), rgba(0,0,0,0.7));
  background: linear-gradient(315deg, rgba(0,0,0,0.4), rgba(0,0,0,0.7));
  background-repeat: no-repeat;
  background-position: center; 
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index:998;
}
#alertBoxOverlay a {
  color: #8080ff;
  text-shadow: -1px -1px white;
}
#alertBoxOverlay svg {
  position: absolute;
  top: 30%;
}
.boxTitle {
  display: block;
  margin: -2px -1px 5px -1px;
  padding: 1px 10px 1px 10px;
  background: #ff9050;
  background: -webkit-linear-gradient(top, #ffa058 0%,#ff8048 100%); /* Chrome10+,Safari5.1+ */
  background: linear-gradient(to bottom, #ffa058 0%,#ff8048 100%); /* W3C */
  color: #fff;
  font-weight: bold;
  border-bottom: 1px solid white;
  border-radius: 5px 5px 0 0;
}
#alertMessage, #confirmMessage {
  padding: 0.5em;
}
#saveAsURLArea {
  width: 99%;
  height: 12em;
}
#newWindow {
  position: relative;
  overflow: auto;
  width: 99%;
  height: 24em;
}
#dlTextField {
  float: left;
  font-size: 1.25em;
  width: 50%;
}
#saveFileFormDiv {
  width:1px;
  height:1px;
  border:0px;
  display:none;
}

/* checkMulti dialog */
#multiCurrentRules, #printMultiCurrentRules {
  font-weight: bold;
}

/* Settings dialog */
#saveFigsSeparateWidth,#saveFigsSeparateHeight {
  width: 3em;
}

#latestVersion {
  margin:-2px 1em 0 0;
  border:0;
  height:18px;
  width:200px;
}
#version {
  margin-right: 1em;
}
.figureStart {
  z-index: 1;
  position: absolute;
  display: hidden;
}
.figureStart hover {
  display: block;
}
#selectFigure {
/* z-index must be lower than that of .figureStart to prevent blinking */
  z-index: 0;
  position: absolute;
}
.largeButton {
  text-align: center;
  font-size: 2em;
  font-weight: bold;
  text-decoration: none;
  color: white;
  border-radius: 8px;
  padding: 1px 10px 1px 10px;
  background: rgb(55,176,232); /* non-W3C browsers */
  background: -webkit-linear-gradient(top, rgba(55,176,232,1) 0%,rgba(6,109,171,1) 100%); /* Chrome10+,Safari5.1+ */
  background: linear-gradient(to bottom, rgba(55,176,232,1) 0%,rgba(6,109,171,1) 100%); /* W3C */
}
.largeButton a {
  text-decoration: none;
  color: white;
}
.largeButton a:hover {
  text-decoration: none;
}

/* tab selector functionality */
.tabSelector {
  overflow: hidden;
}
.tabSelector ul {
  padding: 0 0 1px 0;
  margin: 0;
}
.tabSelector li {
  margin: 0px;
  padding: 2px;
  clear: none;
  float: left;
  display: block;
  border-top: 1px solid white;
  border-right: 1px solid #888;
  border-radius: 5px 5px 0 0;
  text-align: center;
}
.tabSelector a {
  text-decoration: none;
  color: #115;
}
.tabSelector .inactiveTab {
  background: #d0d0d0;
  background: -webkit-linear-gradient(top, #c0c0c8, #e0e0e0);
  background: linear-gradient(top, #c0c0c8, #e0e0e0);
  color: #448;
  border-bottom:1px solid #ccc;
}
.tabSelector .activeTab {
  background: #f4f4f4;
  background: -webkit-linear-gradient(top, #d0d0e8, #f4f4f4);
  background: linear-gradient(top, #d0d0e8, #f4f4f4);
  margin-left: -1px;
  border-left: 1px solid white;
  border-bottom: 2px solid #f4f4f4;
  font-weight: bold;
  text-shadow: 1px 1px white;
}

/****************************
 *      Figure edit tab     *
 ****************************/

#figureOptions {
  float: right;
/*  clear: both;*/
}
#selectedFigure {
  position: relative;
  float: right;
  margin-left: 2px;
  width: 140px;
  height: 140px;
  background: white;
  border: 2px solid #00f;
  border-radius: 3px;
  cursor: pointer;
}
#selectedFigure.active {
  float: left;
}
#unknownFigureChooser {
	float: left;
  width: 144px;
}
.display {
  display: block;
}
.hoverdisplay div {
  display: none;
}
.hoverdisplay:hover div {
  display: block;
}
#t_addFigureText {
  position: absolute;
  padding-top: 1em;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: white;
  opacity: 0.7;
  z-index: 1;
  font-size: 2em;
  color: black;
  text-align: center;
  vertical-align: middle;
}

/* buttons */
.button {
  float: left;
  width: 32px;
  height: 32px;
  margin: 1px;
}
.disable {
  opacity: 0.5;
}
#FUfigOptionsDisabled {
  color: red;
  margin: 0.2em;
}
#switchFirstRoll {
  background-image: url('../buttons/switchFirstRoll.png');
}
#switchX {
  background-image: url('../buttons/switchX.png');
}
#switchY {
  background-image: url('../buttons/switchY.png');
}
#deleteFig {
  background-image: url('../buttons/trash.png');
}
#magMin {
  background-image: url('../buttons/magmin.png');
}
#magPlus {
  background-image: url('../buttons/magplus.png');
}
#moveForward {
  background-image: url('../buttons/moveforward.png');
}
#straightLine {
  background-image: url('../buttons/straightline.png');
}
#curvedLine {
  background-image: url('../buttons/curvedline.png');
}
#scale {
  float: left;
  font-size: 16px;
  text-align: center;
  height: 32px;
  width: 32px;
  margin: 2px;
}
/*#moveX,#moveY {
  float: left;
  font-size: 16px;
  text-align: center;
  height: 24px;
  width: 46px;
  margin: 2px;
}*/
#moveXCont, #moveYCont {
  font-size: 1.5em;
  font-weight: bold;
}
#moveXCont span, #moveYCont span {
  float: left;
}
#subSequence {
  background-image: url('../buttons/subsequence.png');
}
.rollSelect {
  float: left;
}
.rollFlip {
  background-image: url('../buttons/flipOff.png');
  float: left;
}
.rollFlip.on {
  background-image: url('../buttons/flipOn.png');
}
.rollFlipTwo {
  background-image: url('../buttons/flipTwoOff.png');
  float: left;
}
.rollFlipTwo.on {
  background-image: url('../buttons/flipTwoOn.png');
}
.numberFlip {
  background-image: url('../buttons/numberFlipOff.png');
  float: left;
}
.numberFlip.on {
  background-image: url('../buttons/numberFlipOn.png');
}
.rollComment {
  float: left;
  width: 80px;
}
/* button tooltips, disabled for mobile */
.tooltip {
  width: 100%;
  height: 100%;
  outline:none;
}
.tooltip div {
  display:none;
}

/* figureInfo styling */
#figureInfo.section select {
  float: left;
  border: 1px;
}
#entryExit span {
  float: left;
  margin-left: 3px;
  font-size: 14px;
  clear: none;
}
#entryExit span span {
  margin: 0px;
}
.rollGaps {
  float: left;
  clear: none;
}
.minButton {
  float: left;
  margin-left: 5px;
	background-image: url('../buttons/smallMinus.png');
	background-color: transparent;
	background-repeat: no-repeat;
	background-position: 0 0; /* equivalent to 'top left' */
	border: none;
	height: 20px;
  width: 20px;
  color: transparent;
}
.plusButton {
  float:left;
	background-image: url('../buttons/smallPlus.png');
	background-color: transparent;
	background-repeat: no-repeat;
	background-position: 0 0; /* equivalent to 'top left' */
	border: none;
	height: 20px;
  width: 20px;
  color: transparent;
}
.plusMinText {
  float: left;
  font-size: 12px;
  width: 32px;
  text-align: center;
  height: 20px;
}
#figureHeader {
  font-size: 18px;
  vertical-align: top;
}
/* roll selector */
.posFlickSelectOption {
  color: #00f;
}
.negFlickSelectOption {
  color: #f00;
}
.posSpinSelectOption {
  color: #00f;
}
.negSpinSelectOption {
  color: #f00;
}

/* logo chooser */
#logoChooserContainer {
  position: absolute;
  z-index: 20;
  width: 248px;
  padding: 6px;
  margin-bottom: 100px;
  left: -320px;
  top: -30px;
  background: #fff;
  background: -webkit-linear-gradient(top, #f4f4f8, #fff);
  background: linear-gradient(top, #f4f4f8, #fff);
  border: 1px solid #888;
  border-radius: 5px;
  -moz-border-radius: 5px;
  -moz-box-shadow: 5px 5px 8px rgba(0, 0, 0, 0.5);
  -webkit-box-shadow: 5px 5px 8px rgba(0, 0, 0, 0.5);
  box-shadow: 5px 5px 8px rgba(0, 0, 0, 0.5);
  -moz-transition: 0.3s blur;
  -o-transition: 0.3s left;
  -webkit-transition: 0.3s left;
  transition: 0.3s left;
}
#logoChooserContainer.active {
  left: 2px;
}
#logoChooserContainer img {
  float: right;
  margin: 0 0 2px 2px;
  vertical-align: center;
}

#logoChooserContainer input {
  float: none;
  clear: both;
  width: 100%;
  height: 2em;
}

/* figure chooser */
#figureChooser {
  margin: 2px;
  width: 300px;
  height: 85%;
  background: rgba(255, 255, 255, 0.7);
  overflow: auto;
}
#figureChooser a:hover {
  text-decoration: none;
}
#figureSelectorClose {
  float: right;
}
table#figureChooserTable td {
  padding: 1px;
  border: 2px solid #eee;
  border-radius: 5px;
  text-align: right;
  font-size: 14px;
}
table#figureChooserTable td.selected {
  border: 2px solid magenta;
}
table#figureChooserTable td.matchingFigure {
  box-shadow:inset 4px 4px #a0ff60;
}
table#figureChooserTable td.figureNotAllowed {
  outline: #ff8040 solid 2px;
  outline-offset: -3px;
}
table#figureChooserTable td.figureNotAllowedHidden {
  display: none;
}
table#figureChooserTable div {
  position: relative;
}
.familyA {
  background: #fff;
}
.familyB {
  background: #f8f8f8;
}
.removeFigureButton {
  position: absolute !important;
  right: 0px;
  top: 0px;
  opacity: 0.5;
  transition: opacity .1s ease-in-out;
  -moz-transition: opacity .1s ease-in-out;
  -webkit-transition: opacity .1s ease-in-out;
  z-index: 9;
}
.removeFigureButton:hover {
  opacity: 1;
}
#t_hideIllegalFigures {
  font-size: 0.8em;
}
.UFletterInQueue {
  position: absolute; /* relative to container */
  color: #048;
  text-shadow:-1px -1px white, 1px 1px white;
  font-size: 1.4em;
  margin-left: 0.5em;
  left: 0;
  bottom: 0;
}
.queueUsed {
  background: #ddd;
  background: -webkit-linear-gradient(top, #eee, #ccc);
  background: linear-gradient(top, #eee, #ccc);
}

/* main menu */

/* menu dropdown functionality */
/*set up ul tags*/ 
#menu, #menu ul {
  padding:0;
  margin:0;
}
/*set up a tags*/ 
#menu a {
  display:block;
}
/*position level 1 links horizontally*/ 
#menu li {
  display:block;
  float:left;
}
/*undo previous style for level 2 links*/
#menu li ul li {
  float:none;
}
/*position level 2 links vertically and hide*/ 
#menu li ul {
  display:none;
  position:absolute;
  z-index:10;
  -webkit-transform-style: preserve-3d;
  margin-top: -3px; /* prevents menu disappearing on FF */
  border-right: 1px solid #aaa;
  border-bottom: 1px solid #aaa;
  -moz-box-shadow: 5px 5px 8px rgba(0, 0, 0, 0.5);
  -webkit-box-shadow: 5px 5px 8px rgba(0, 0, 0, 0.5);
  box-shadow: 5px 5px 8px rgba(0, 0, 0, 0.5);
  background-color:#fbfbfb;
}
/*unhide level 2 links on li.active from level 1*/ 
#menu li.active ul {
  display:block;
}
/*undo previous style for level 3 links*/
#menu li ul li ul li {
  float:none;
}
/*position level 3 links vertically and hide*/ 
#menu li ul li ul {
  display:none;
  position:absolute;
  left:-182px;
  width:180px;
  z-index:10;
  -webkit-transform-style: preserve-3d;
  margin-top: -24px;
  border-right: 1px solid #aaa;
  border-bottom: 1px solid #aaa
}
/*don't unhide level 3 links on li.active from level 1*/
#menu li.active ul li ul {
  display:none;
}
/*unhide level 3 links on li.active from level 2*/
#menu li.active ul li.active ul {
  display:block;
}
/*undo previous style for level 4 links*/
#menu li ul li ul li ul li {
  float:none;
}
/*position level 4 links vertically and hide*/ 
#menu li ul li ul li ul {
  display:none;
  position:absolute;
  left:175px;
  width:180px;
  z-index:10;
  -webkit-transform-style: preserve-3d;
  margin-top: -24px;
  border-right: 1px solid #aaa;
  border-bottom: 1px solid #aaa
}
/*don't unhide level 4 links on li.active from level 1*/
#menu li.active ul li ul li ul {
  display:none;
}
/*don't unhide level 4 links on li.active from level 2*/
#menu li.active ul li.active ul li ul {
  display:none;
}
/*unhide level 4 links on li.active from level 3*/
#menu li.active ul li.active ul li.active ul {
  display:block;
}

/* dropdown */
#menu {
  height:28px;
  z-index: 10;
}
#menu a {
  color:#00f;
  text-decoration: none;
  padding:5px 15px 5px 15px;
}
#menu a:hover {
  color:#03f;
}
#menu li {
  background:transparent;
  margin-left:-1px;
}
#menu li.active {
  background-color:#ddf;
}
/* Class select box */
#class {
  background: #ffc;
}

.checkInfo {
  border: 2px solid red;
  border-color: #c00 #f66 #f66 #c00;
}

/*Combo input box*/
.combo {
  position:relative;
}
.combo * {
  padding:0;
  margin:0;
}
.combo input {
  width:120px;
  background-color:#ffc;
  height:1.5em;
  z-index:0;
}
.combo ul {
  padding:1px;
  border: 1px solid #000;
  width: 120px;
  background-color:#ffc;
  position:absolute;
  right:2px;
  top:1.6em;
  display:none;
  z-index:1;
}
.combo li {
  display:block;
  width: 100%;
  cursor: pointer;
}

/* printing styles are in OpenAero.js and print.css */
